<template>
	<div class="search_title">
    <a class="goback" @click="goback">《</a>
    <div class="search_menu">三</div>
  </div>
  <form class="repeat_search" method="GET">
    <input type="text" name="search_value" @click="goUrl('search_input')">
    <input type="submit" value="Search">
  </form>
  <div class="search_gg">
    <img src="../assets/search_gg.jpg">
  </div>
  <div class="search_filter">
      <select @change="placeF" v-model="s_place">
        <option value="normal" selected="selected">位置</option>
        <option value="高新园区">高新园区</option>
        <option value="旅顺口区">旅顺口区</option>
        <option value="甘井子区">甘井子区</option>
        <option value="开发区">开发区</option>
      </select>
      <select @change="priceF(s_array)" v-model="s_price">
        <option value="normal" selected="selected">价格</option>
        <option value="gtd">由高到低</option>
        <option value="dtg">由低到高</option>
      </select>
      <select>
        <option>户型</option>
        <option>暂未开放</option>
      </select>
      <select>
        <option>其他</option>
        <option>暂未开放</option>
      </select>
  </div>
  <ul class="search_list">
      <li v-for="item of s_array" track-by="$index">
         <div class="l_img">
            <img :src="item.img">
         </div>
         <div class="l_content">
            <p class="lc_t">{{ item.title }}</p>
            <p class="lc_p">
              <span class="fl">{{ item.place }}</span>
              <span class="fr">{{ item.price }}元/㎡</span>
            </p>
            <p class="lc_a">{{ item.area }} ㎡</p>
         </div>
      </li>
  </ul>
  <Vfooter></Vfooter>
</template>

<script>

import Vfooter from 'components/Vfooter'
var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);
var ajaxData = null;
export default {
  
  data () {
    return {
      s_array: [],
      s_price: '',
      s_place: '',
    }
  },
  methods: {
    getAjax: function(){
      var url = "../static/Data.json";
      this.$http.get(url,{

      }).then(res => {
        ajaxData = res.body;
        this.s_array = ajaxData.data;
      }, err => {
        console.log("请求失败！");
      });
    },
    goback: function(){
    // 处理返回上一页
      history.go(-1);
      // history.back();
    },
    priceF: function(cArray){
    // 价格排序
      // 与其他条件共享当前数据
      var arr = cArray;
      function gtdF(){
        arr = arr.sort(function(a, b){
          return b.price-a.price; 
        });
      }
      function dtgF(){
        arr = arr.sort(function(a, b){
          return a.price-b.price; 
        });
      }
      switch(this.s_price){
        case 'gtd': gtdF();
        break;
        case 'dtg': dtgF();
        break;
        default: arr = cArray;
      }
      this.s_array = arr;
    },
    placeF: function(){
    // 地区筛选
      if(this.s_place == 'normal'){
        this.s_array = this.copyArray();
        return;
      };
      var arr = this.copyArray();
      arr = arr.filter(function(a){
        if(a.place == this.s_place) return a; 
      },this); 
      this.s_array = arr;
    },
    copyArray: function(){
      var arr = [];
      ajaxData.data.forEach(function(c){
          arr.push(c);
      });
      return arr;
    },
    goUrl: function(url, w){
      // 根据项目具体情况,改写目录文件名作为URL地址
      // 开发模式 可以使用相对/绝对路径
      // 生产模式 必须使用相对路径
      if(arguments.length >1){
        location.href = "../module/" + url + ".html?w=" + w;
      }else{
        location.href = "../module/" + url + ".html";
      } 
    },

  },
  components:{
    Vfooter
  },
  created:function(){
    this.getAjax();
  }
  


};


</script>


<style>
*{
  margin:0px;
  padding: 0px;
}
li{
  list-style: none;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.fr:after{
  clear: both;
}
.search_title{
  position: relative;
  width: 100%;
  height: 45px;
   font-size: 24px;
  color: #ccc;
}
.search_title .goback{
  position: absolute;
  top: 5px;
  left: 10px;
  width: 40px;
  height: 35px;
}
.search_title .search_menu{
  position: absolute;
  top: 5px;
  right: 10px;
}
.repeat_search{
  overflow: hidden;
  padding: 10px;
}
.repeat_search input[type="text"]{
  float: left;
  width: 70%;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.repeat_search input[type="submit"]{
  float: right;
  width: 25%;
  height: 32px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 16px;
  color: #ccc;
}
.search_gg{
  width: 100%;
}
.search_gg img{
  width: 100%;
  max-width: 100%;
}

.search_filter{
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.search_filter select{
  float: left;
  width: 19%;
  height: 20px;
  margin: 0 3%;
  border: none;
}
.search_list {
  padding: 10px;
}
.search_list .l_img{
  float: left;
  width: 33%;
  margin: 0px 10px 0 0;
}
.search_list .l_img img{
  max-width: 100%;
}
.search_list li{
  overflow: hidden;
  width: 100%;
  margin-bottom: 5px;
}
.search_list li .l_content p{
  line-height: 28px;
}
.search_list li .l_content .lc_t{
  font-size: 18px;
  color: #000;
}
.search_list li .l_content .lc_p{
  overflow: hidden;
  fong-size: 14px;
}
.search_list li .l_content .lc_p .fr{
  color: red;
  font-weight: bold;
}
.search_list li .l_content .lc_a{
  font-size: 14px;
  color: #676767;
}
</style>